<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=FjPwqFvEEXvxravg5aatUuNtQGhbdtjr"></script>
    <title>我的地图在这里</title>
</head>
<body>
	<p><a href="index.html">返回主页吧!</a></p>
	<div id="allmap">
	</div>
</body>
</html>
<script type="text/javascript">
    //判断浏览器是否支持地理位置获取
    if(navigator.geolocation){
        //获取地理位置信息
        navigator.geolocation.getCurrentPosition(showPosition,showError);
    }else{
        alert("该浏览器不支持地理位置定位");
    }

    //获取地理位置成功后的回调函数
    function showPosition(position) {
        //经度
        let longitude=position.coords.longitude;
        //纬度
        let latitude=position.coords.latitude;
        // 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(longitude, latitude), 11);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
        map.addControl(top_left_navigation);
        map.addControl(top_right_navigation);

        var marker = new BMap.Marker(new BMap.Point(longitude, latitude));  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        var infoWindow = new BMap.InfoWindow("地址：这是我的家");  // 创建信息窗口对象
        marker.addEventListener("click", function(){
            map.openInfoWindow(infoWindow,new BMap.Point(longitude, latitude)); //开启信息窗口
        });
    }

    //获取地理位置失败后的回调函数
    function showError(error) {
        alert("获取地理位置失败");
        console.log(error);
    }

</script>